<template>
  <div>
       <!-- Vant:导航栏 -->
       <van-nav-bar title="购物车" />
       <!-- Vant:滑动单元格 -->
      <van-swipe-cell v-for="(item,ind) in goodsArr" :key="item.id">
         <!-- Vant:商品卡片 -->
        <van-card
          :num="item.num"
          :price="item.price"
          :title="item.goodsname"
          class="goods-card"
          :thumb="imgHost + item.img"
        >
           <template #footer>
               <div>
                <van-stepper v-model="item.num" />
               </div>
           </template>
           <template #tags>
              <div>
                <van-checkbox @change="selone(ind)" v-model="item.isCheck"></van-checkbox>
                <!-- <input type="checkbox" v-model="item.isCheck" @change="selone(ind)" /> -->
                </div>
           </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <!-- Vant:提交订单栏 -->
      <van-submit-bar :price="totals" button-text="提交订单" @submit="onSubmit">
        <!-- 注意：这里绑定click事件 -->
        <van-checkbox @click="checkAll" v-model='selAll'>全选</van-checkbox>
        <!-- <input type="checkbox" @change="checkAll" v-model='selAll' /> -->
      </van-submit-bar>
  </div>
</template>

<script>
import {getCartData,getCurUserId} from '../../../request/api.js'

export default {
    data(){
      return {
        selAll:true,//全选/全不选
        goodsArr:[],//购物车中的商品数据
      }
    },
   methods:{
      selone(index){  //单个复选框
          // console.log(index,'index..');
           //console.log(this.goodsArr[index].isCheck,'isCheck');
           let flag = 0;
           for(let objs of this.goodsArr){
                 if(objs.isCheck){
                  flag++;
                 }
           }
           console.log(flag,'flag');
           if(flag == this.goodsArr.length){
              this.selAll = true;
           }else{
             this.selAll = false;
           }
      },
      checkAll(){//实现全选/全不选
         console.log(this.selAll,'this.selAll');
            for(let objs of this.goodsArr){
               objs.isCheck = this.selAll;
            } 
      },
      onSubmit(){  //添加订单

      },
      getCartInfo(){
        //获取已登录的用户ID:
        let uid = getCurUserId('/cart');

        getCartData({uid}).then(d=>{
          if(d.data.code == 200){
            for(let obj of d.data.list){
                obj.isCheck = true;
            }
             this.goodsArr = d.data.list;
          }
        }).catch(e=>{
          console.log(e);
        });
      }
   },
   mounted(){
    this.getCartInfo();
   },
   computed:{  //计算属性
      totals(){ //计算总金额
        let num = 0;//总金额
        for(let obj of this.goodsArr){
            if(obj.isCheck){ //选中了该商品
              num += obj.price*obj.num;
            }
        }
        return num*100;
      }
   }
}
</script>

<style scoped>
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }

.van-nav-bar{
  background-color: red;
}

.van-nav-bar /deep/ .van-nav-bar__title{
  color:white;
  font-size: 26px;
}

.van-submit-bar{
  bottom:60px;
}

.van-card .van-checkbox{
  margin:0 0 0 -110px;
}
</style>